<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        html {
            font-size: 16px;
        }
        #button-container{

        }
        button{
            padding: .3em 1em;
            border: 1px solid #446d88;
            background: #58a linear-gradient(hsla(0,0%,100%,.2),
            transparent);
            border-radius: .2em;
            box-shadow: 0 .05em .25em rgba(0,0,0,.5); color: white;
            text-shadow: 0 -.05em .05em rgba(0,0,0,.5);
            font-size: 1.25em;
            line-height: 1.5em;
        }
        button.ok {
            background-color: #6b0;
        }
        button.cancel {
            background-color: #c00;
        }
        .callout {
            position: relative;
            width: 100px;
            height: 30px;
            background-color: antiquewhite;
        }
        .callout::before { content: "";
            position: absolute;
            top: -.4em; left: 1em; padding: .35em; background: inherit; border: inherit; border-right: 0; border-bottom: 0; transform: rotate(45deg);
        }
        ul { --accent-color: purple; }
        ol { --accent-color: rebeccapurple; } li { background: var(--accent-color); }
    </style>
</head>
<body>
    <div id="button-container">
        <button id="button">defalt</button>
        <button class="ok">ok</button>
        <hr>
        <button class="cancel">cancel</button>
        <a href="">首页</a>
    </div>
    <div class="callout">
        callout
    </div>
    <ul>
        <li>1</li>
    </ul>
    <ol>
        <li>1</li>
    </ol>
</body>
</html>